<!--
 * @Author: N0ts
 * @Date: 2022-08-16 15:06:38
 * @Description: 背景
 * @FilePath: /vue/src/components/background/background.vue
 * @Mail：mail@n0ts.top
-->

<template>
    <!-- 背景 -->
    <div
        id="background"
        refname="background"
        :style="data.backgroundCss"
        :class="{
            active: data.searchBoxFocus,
            activeBlur: !data.saveData.AeroState && data.searchBoxFocus
        }"
    >
        <!-- 天气 -->
        <weather></weather>

        <!-- 导航菜单 -->
        <Menu></Menu>
    </div>
</template>

<script setup lang="ts">
import weather from "../weather/weather.vue";
import Menu from "../menu/menu.vue";
import data from "@/data/data";
import { watch } from "vue";
import backgroundUtil from "@/utils/backgroup";

watch(
    () => data.saveData.bgLink,
    () => {
        // 是否设置了壁纸，没设置则获取 bing
        if (data.saveData.bgSet) {
            backgroundUtil.setBg(data.saveData.bgLink);
        } else {
            backgroundUtil.getBing();
        }
    }
);

backgroundUtil.getBing();
</script>

<style scoped lang="less">
#background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.active {
    opacity: 0.5;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    filter: blur(10px);
}

.activeBlur {
    filter: none;
    opacity: 0.3;
}
</style>
